<template>
	<el-form ref="form" :model="form" v-loading="loading" element-loading-text="正在建档"   label-width="100px" :rules="rules2" @submit.prevent="onSubmit" style="margin:20px;width:100%;min-width:600px;">
    <el-row >
       <el-col :span="5">
        <el-form-item label="用户编号"  >
            <el-input v-model="form.userid" :disabled="true" placeholder="用户编号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="用户姓名" prop="username">
            <el-input v-model="form.username" placeholder="用户姓名"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="用户地址" prop="useraddress">
            <el-input v-model="form.useraddress" placeholder="XX小区XX号楼XX单元XX室"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="联系方式" prop="userphone">
            <el-input v-model="form.userphone" placeholder="固话/手机"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="证件类型" prop="credittype">
          <el-select v-model="form.credittype" placeholder="请选择">
            <el-option label="身份证" value="身份证"></el-option>
            <el-option label="军官证" value="军官证"></el-option>
            <el-option label="护照" value="护照"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="证件号码" prop="creditno">
            <el-input v-model="form.creditno" placeholder=""></el-input>
        </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="5">
      <el-form-item label="设备" prop="clienttype" >
        <el-select v-model="form.clienttype" placeholder="请选择">
          <el-option label="LORA" value="LORA"></el-option>
          <el-option label="NB" value="NB"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="5">
      <el-form-item label="设备编号" prop="clientcode">
        <el-input v-model="form.clientcode" placeholder="请按照实际填写"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="5">
      <el-form-item label="价格类型" prop="pricetype" >
        <el-select v-model="form.pricetype"   placeholder="请选择">
               <el-option
                  v-for="item in pricedata"
                  :label="item.f_stairpricename"
                  :value="item.f_stairpricename"
                  :key="item.f_stairpricename">
                </el-option>
        </el-select>
      </el-form-item>
    </el-col>
     <el-col :span="5">
      <el-form-item label="日期类型" prop="effectdatetype" >
        <el-select v-model="form.effectdate"   placeholder="请选择">
               <el-option
                  v-for="item in effectdatedata"
                  :label="item.f_effectdatename"
                  :value="item.f_effectdatename"
                  :key="item.f_effectdatename">
                </el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="20">
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="5">
      <el-form-item label="建档人">
        <el-input   v-model="form.operator" :disabled="true"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-form-item>
			<el-button type="primary" @click.native.prevent="handleCreateUser" >立即创建</el-button>
			<el-button @click.native.prevent="handleReset2">取消</el-button>
		</el-form-item>
  </el-row>
  </el-form>
   
</template>

<script>
 import { getUserID , addUser,getStairPriceName , getEffectDateName } from '../../api/api';
	export default {
		data() {
			return {
        loading: false,
        pricedata:[],
        effectdatedata:[],
				form: {
          userid: '',
					name: '',
					remark: '无',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
          desc: '' 
          
        } ,
        rules2: {
          username: [
            { required: true, message: '请输入用户姓名', trigger: 'blur' },
          ],
          useraddress: [
            { required: true, message: '请输入用户地址', trigger: 'blur' },
          ],
          userphone: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
          ],
          pricetype: [
            { required: true, message: '请选择价格', trigger: 'blur' },
          ],
          userid: [
            { required: true, message: '请选择价格', trigger: 'blur' },
          ],
          clientcode: [
            { required: true, message: '请选择价格', trigger: 'blur' },
          ],
     
        },
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
      },
      handleReset2:function() {
        this.$refs.form.resetFields();
      },
      handleCreateUser :function(){
        var olduserid =   this.form.userid  ;
         var loginParams = {  };
            getUserID(loginParams).then(data => {
              if(olduserid !==data.data.maxuserid){
             this.form.userid  = data.data.maxuserid;
             console.log("后台编号已改变,自动重置用户编号");
             }
              this.createUser(); 
            });
       
      },
      createUser:function(){
         this.$refs.form.validate((valid) => {
          if(valid){
                this.loading=true;
                var createParams = { 
                    userid: this.form.userid,
                    username: this.form.username, 
                    userphone: this.form.userphone, 
                    useraddress: this.form.useraddress, 
                    credittype: this.form.credittype, 
                    pricetype: this.form.pricetype, 
                    effectdatetype : this.form.effectdate,
                    operator: this.form.operator, 
                    creditno: this.form.creditno,
                    remark:  this.form.remark,
                    clienttype: this.form.clienttype,
                    clientcode: this.form.clientcode,
                   
                };
                console.log("发送的数据");
                console.log(createParams);
             
                addUser(createParams).then(data => {
                 
                  if(data.data==='createusersuccess'){
                    this.loading=false;
                     this.$message({
                         message: "创建用户"+this.form.userid+"成功",
                         type: 'success'
                     });
                    //清空界面
                     this.$refs.form.resetFields();
                   //更新用户编号
                    this.getMaxUserID()
                  }else{
                    this.$message({
                         message: "创建用户"+this.form.userid+"失败",
                         type: 'error'
                     });
                  }
                });
          }else{
            console.log('error submit!!');
            return false;
          }
        });
      },
      getMaxUserID :function(){
            var loginParams = {  };
            getUserID(loginParams).then(data => {
             this.form.userid  = data.data.maxuserid;
            });
      },
      getallStairPriceName :function(){
            var loginParams = {  };
            getStairPriceName(loginParams).then(data => {
              console.log(data.data[0].f_stairpricename);
            this.pricedata =data.data;
            });
      },
      getallEffectDateName : function(){
         var loginParams = {  };
            getEffectDateName(loginParams).then(data => {
              console.log(data.data[0].f_effectdatename);
            this.effectdatedata =data.data;
            });
      }
    },
    mounted() {
      var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.form.operator = user.name || '';
			  }
      this.getMaxUserID();
      this.getallStairPriceName();
      this.getallEffectDateName();
      //获取价格列表名称

    }
	}

</script>
